<template>
  <div class="common-layout">
    <el-container style="height:100%">
      <el-main>
        <div style="width: 1200px;height:835px;margin: 0 auto;">
          <el-row :gutter="30" style="margin-left: 5px">
          <div style="height:  800px;width: 200px; z-index: 10">
            <el-col  :span="4"  style="height: 800px;background: white;border-radius: 10px;position: fixed">
              <div @mouseleave="hideElement()" style="margin: 10px auto;text-align: center;">
                <el-button  @mouseover="showElement()"  type="primary" size="large" style="width: 120px;height: 60px;background:#056DE8;border-radius: 10px;font-size: 18px"><div id="bt_1">内容创作</div></el-button>

                <br>

                <div v-show="isElementVisible ||isDropdownHovered" class="d_1" style="width: 100px;height: 80px;background: #ffffff;border-radius: 10px;position: absolute;top: 20px;left: 160px;z-index: 999">
                  <p ><a href="/write">发布想法</a></p>
                  <p ><a href="/write">发布文章</a></p>
                  <p ><a href="/zvideo/upload-video">上传视频</a></p>
                </div>
                <div style=" margin: 15px 0;text-decoration: none">
                <a href="center" style="font-size: 18px;font-weight: bold;color:#3e3939;text-decoration: none">
                  <el-icon><User /></el-icon>主页
                </a>
                </div>
                <!--创作灵感 -->
                <el-menu style="border: none"
                         default-active="2"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose"
                         router
                >
                  <el-sub-menu index="1">
                    <template #title>
                      <svg width="18" height="18" viewBox="0 0 24 24" class="Zi Zi--Edit css-1myg3er" fill="currentColor">
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z">

                        </path>
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path>
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path></svg>
                      &nbsp;&nbsp;
                      <span style="font-size: 18px;font-weight: bold;color:#3e3939" >创作灵感</span>
                    </template>
                    <el-menu-item index='featured-question'>问题推荐</el-menu-item>
                    <el-menu-item index="1-2">近期热点</el-menu-item>
                    <el-menu-item index="1-3">潜力问题</el-menu-item>
                    <el-menu-item index="1-4">问题搜索</el-menu-item>
                  </el-sub-menu>
                </el-menu>
                <!--内容管理 -->
                <el-menu style="border: none"
                         default-active="2"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose"
                         router
                >
                  <el-sub-menu index="1">
                    <template #title>
                      <svg width="18" height="18" viewBox="0 0 24 24" class="Zi Zi--Edit css-1myg3er" fill="currentColor">
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z">

                        </path>
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path>
                        <path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path></svg>
                      &nbsp;&nbsp;
                      <span style="font-size: 18px;font-weight: bold;color:#3e3939" >内容管理</span>
                    </template>
                    <el-menu-item index="creation">内容管理</el-menu-item>
                    <el-menu-item index="">评论管理</el-menu-item>
                  </el-sub-menu>
                </el-menu>
              </div>

            </el-col>
          </div>
            <el-col :span="20" style="z-index:1" >
              <router-view />
            </el-col>
          </el-row>

        </div>
      </el-main>
    </el-container>
  </div>


</template>

<script setup>
import {onMounted, reactive , ref} from "vue";

import router from '@/router';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const showElement = () => {
    isElementVisible.value = true;
};
const hideElement  = () => {
    isElementVisible.value = false;
}
const isDropdownHovered=ref(false)
const isElementVisible=ref(false);
const logoUrl=ref("imgs/创作中心/文字logo.png");
const headUrl=ref("imgs/登录注册/head1.jpg")

</script>

<style>
#create hover{

}
.el-header .logo-text {
  line-height: 52px;
}
a{
  text-decoration: none;
}
.content{margin-bottom: 10px;
  border-radius: 10px;}
.el-menu-item{
  color: #808080;
  margin: 0 0 5px 8px;
  font-weight: bold;
}

p {
  height: 30px;
  line-height: 30px;
  color: #423f3f;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
p>a{
  color: #423f3f;
}

p:hover{
  background: #d2d2d2;
}
</style>